I'm new to vue.js and I cannot seem to figure out what is going wrong in this code.

Everytime I load the page, the below mentioned error pops up, which is causing the page to get stuck.

Error in created hook (Promise/async): "ReferenceError: document is not defined"

This is the component I created. I'm attaching the code below. Hoping to find some insights on this.

<template>
    <div v-cloak id="doc-view-layout">
        <v-container v-else>
            <div id="doc-view-header-container">
            <DocumentViewHeader
                :title="title"
            />
            </div>

            <div id="citation-container">
            <v-row>
                <v-col cols="9">
                    <citation-card
                        id="citations"
                        class="citation-card"
                    />

                    <citation-card
                        id="similar-articles"
                        class="citation-card"
                    />
                </v-col>
            </v-row>
            </div>
        </v-container>
    </div>
</template>

<script>
import $ from 'jquery';

//imports

export default {
    components: {
      //components  
    },
    async fetch() {
    },
    data() {
       //task
    },
    computed: {
        //some task
    },
    async created() {
        this.loading = true;
        let data = null;
        switch (this.idType){
          case 'pid':
            data = await this.getDataFromServer({pid: this.docId});
            break;
          default:
            this.loading = false;
            return;
        }
        this.title = data.paper.title;

        this.loading = false;
    },
    mounted() {
        //do some task
    },
    methods: {
        //do something
    },
    layout: 'search'
};
</script>

API call details are below:

getDataFromServer ({context}, { pid }) {
    return this.$axios.$get('/info', { params: {paper_id: pid}})
},

The above mentioned server API is working fine.